﻿@inherits TranslationsPage
@page "/admin/translations"
@attribute [Authorize(Policy = Policies.IsAdmin)]
@layout AdminLayout

<h1>@L["Translations"]</h1>

@if (localizationRecordKeys == null)
{
<LoadingBackground ShowLogoBox="true">
    <label>@L["Loading"]</label>
</LoadingBackground>
}
else
{
<div class="mat-layout-grid">
    <MatTextField ValueChanged="(string filter) => LoadKeys(filter)" Icon="search" />
    <div class="mat-layout-grid-inner">
        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3">
            <MatTable Items="@localizationRecordKeys" Class="mat-elevation-z5" Striped="true" PageSize="@pageSize" ShowPaging="false"
                      AllowSelection="true" SelectionChanged="async (object key) => await LoadLocalizationRecords((LocalizationRecordKey)key)">
                <MatTableHeader>
                    <th><MatButton Icon="add" Label=@L["NewTranslation"] OnClick="@OpenNewKeyDialogOpen"></MatButton></th>
                    <th>@L["MsgId"]</th>
                    <th>@L["ContextId"]</th>
                </MatTableHeader>
                <MatTableRow Context="keyRow">
                    <td>
                        <div>
                            <MatIconButton Icon="edit" OnClick="@(() => OpenEditDialog(keyRow))"></MatIconButton>
                            <MatIconButton Icon="delete" OnClick="@(() => OpenDeleteDialog(keyRow))"></MatIconButton>
                        </div>
                    </td>
                    <td>@keyRow.MsgId</td>
                    <td>@keyRow.ContextId</td>
                </MatTableRow>
            </MatTable>
            <MatPaginator PageSize="@pageSize" Page="async a => await OnPage(a)" Length="@totalItemsCount" Style="background: transparent"></MatPaginator>
        </div>
        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-9">
            <MatTable Items="@localizationRecords" Class="mat-elevation-z5" Striped="true" ShowPaging="false" PageSize="50">
                <MatTableHeader>
                    <th></th>
                    <th>@L["Culture"]</th>
                    <th style="width: 100%;">@L["Translation"]</th>
                    <th></th>
                </MatTableHeader>
                <MatTableRow Context="row">
                    <td>
                        <div>
                            <MatIconButton Icon="delete" OnClick="@(() => DeleteLocalizationRecord(row))" Disabled="@(row.Culture == BlazorBoilerplate.Shared.Localizer.Settings.NeutralCulture)"></MatIconButton>
                        </div>
                    </td>
                    <td><b>@row.Culture</b></td>
                    <td>
                        <MatTextField @bind-Value="@row.Translation" TextArea="true" FullWidth="true" Required="true"></MatTextField>
                    </td>
                    <td>
                        <div>
                            <MatButton Outlined="@(row.PluralTranslations.Count == 0)" Raised="@(row.PluralTranslations.Count > 0)" OnClick="@(() => OpenPluralDialog(row))">@L["Plural"]</MatButton>
                        </div>
                    </td>
                </MatTableRow>
            </MatTable>
            @if (LocalizationCultures.Count > 0)
            {<EditForm Model="@newLocalizationRecord" OnValidSubmit="@SaveNewLocalizationRecord">
                    <FluentValidationValidator />
                    <ValidationSummary />
                    <fieldset>
                        <div class="form-group">
                            <MatSelectItem @bind-Value="@newLocalizationRecord.Culture" Items="@LocalizationCultures" Label=@L["Culture"]></MatSelectItem>
                            <MatTextField @bind-Value="@newLocalizationRecord.Translation" Label=@L["Translation"] FullWidth="true" TextArea="true"></MatTextField>
                            <MatButton Type="submit" Raised="true">@L["Add"]</MatButton>
                        </div>
                    </fieldset>
                </EditForm>}
        </div>
    </div>
    <MatButton OnClick="@CancelChanges" Raised="true">@L["Cancel"]</MatButton>
    <MatButton OnClick="@SaveChanges" Raised="true">@L["Save"]</MatButton>
    <MatButton OnClick="@ReloadTranslations" Raised="true">@L["ReloadTranslations"]</MatButton>
    @*Hack. See https://github.com/SamProf/MatBlazor/issues/713*@
    <MatButton OnClick="@(e => { navigationManager.NavigateTo("/api/localization/export", true); })" Raised="true">@L["Export"]</MatButton>
    @*<MatButton Link="/api/localization/export" Raised="true">@L["Export"]</MatButton>*@
    <MatFileUpload OnChange="@Upload" Label="@L["Import PO file"]"></MatFileUpload>
</div>

<MatDialog @bind-IsOpen="@isEditDialogOpen">
    <MatDialogTitle>@L["Edit {0}", currentKey]</MatDialogTitle>
    <MatDialogContent>
        <div class="form-group">
            <MatTextField @bind-Value="@newKey.ContextId" Label=@L["ContextId"] Icon="vpn_key" IconTrailing="true" FullWidth="true" Required="true"></MatTextField>
        </div>
        <div class="form-group">
            <MatTextField @bind-Value="@newKey.MsgId" Label=@L["MsgId"] Icon="vpn_key" IconTrailing="true" FullWidth="true" Required="true"></MatTextField>
        </div>
    </MatDialogContent>
    <MatDialogActions>
        <MatButton OnClick="@(e => { isEditDialogOpen = false; })">@L["Cancel"]</MatButton>
        <MatButton OnClick="@(()=>EditLocalizationRecordKey())">@L["Save"]</MatButton>
    </MatDialogActions>
</MatDialog>

<MatDialog @bind-IsOpen="@isDeleteDialogOpen">
    <MatDialogTitle><MatIcon Icon="warning"></MatIcon> @L["Confirm Delete"]</MatDialogTitle>
    <MatDialogContent>
        @L["Are you sure you want to delete {0}?", currentKey]
    </MatDialogContent>
    <MatDialogActions>
        <MatButton OnClick="@(e => { isDeleteDialogOpen = false; })">@L["Cancel"]</MatButton>
        <MatButton OnClick="@(()=>DeleteLocalizationRecordKey(currentKey))">@L["Delete"]</MatButton>
    </MatDialogActions>
</MatDialog>

<MatDialog @bind-IsOpen="@isNewKeyDialogOpen">
    <MatDialogTitle>@L["NewTranslation"]</MatDialogTitle>
    <MatDialogContent>
        <EditForm id="newKeyForm" Model="@newLocalizationRecord" OnValidSubmit="@SaveNewKey">
            <FluentValidationValidator />
            <ValidationSummary />
            <fieldset>
                <div class="form-group">
                    <MatTextField @bind-Value="@newLocalizationRecord.ContextId" Label=@L["ContextId"] Icon="vpn_key" IconTrailing="true" FullWidth="true" Required="true"></MatTextField>
                </div>
                <div class="form-group">
                    <MatTextField @bind-Value="@newLocalizationRecord.MsgId" Label=@L["MsgId"] Icon="vpn_key" IconTrailing="true" FullWidth="true" Required="true"></MatTextField>
                </div>
                <div class="form-group">
                    <MatTextField @bind-Value="@newLocalizationRecord.Culture" Label=@L["Culture"] Icon="public" IconTrailing="true" FullWidth="true" Required="true" Disabled="true"></MatTextField>
                </div>
                <div class="form-group">
                    <MatTextField @bind-Value="@newLocalizationRecord.Translation" Label=@L["Translation"] FullWidth="true" Required="true" TextArea="true"></MatTextField>
                </div>
            </fieldset>
        </EditForm>
    </MatDialogContent>
    <MatDialogActions>
        <MatButton OnClick="@CancelChanges">@L["Cancel"]</MatButton>
        <MatButton Type="submit" form="newKeyForm" Raised="true">@L["Save"]</MatButton>
    </MatDialogActions>
</MatDialog>

<MatDialog @bind-IsOpen="@isPluralDialogOpen">
    <MatDialogTitle>@L["Plural"]</MatDialogTitle>
    <MatDialogContent>
        <MatTable Items="@currentLocalizationRecord.PluralTranslations" Class="mat-elevation-z5" Striped="true" ShowPaging="false" PageSize="50">
            <MatTableHeader>
                <th></th>
                <th>@L["Index"]</th>
                <th>@L["Translation"]</th>
            </MatTableHeader>
            <MatTableRow Context="row">
                <td>
                    <div>
                        <MatIconButton Icon="delete" OnClick="@(() => DeletePluralTranslation(row))"></MatIconButton>
                    </div>
                </td>
                <td>
                    <MatTextField @bind-Value="@row.Index" TextArea="true" FullWidth="true" Required="true"></MatTextField>
                </td>
                <td>
                    <MatTextField @bind-Value="@row.Translation" TextArea="true" FullWidth="true" Required="true"></MatTextField>
                </td>
            </MatTableRow>
        </MatTable>
        @if (PluralFormRules[currentLocalizationRecord.Culture].Count > currentLocalizationRecord.PluralTranslations.Count)
        {<EditForm Model="@newPlural" OnValidSubmit="@SaveNewPlural">
                <FluentValidationValidator />
                <ValidationSummary />
                <fieldset>
                    <div class="form-group">
                        <MatTextField @bind-Value="@newPlural.Index" Label=@L["Index"] FullWidth="true"></MatTextField>
                        <MatTextField @bind-Value="@newPlural.Translation" Label=@L["Translation"] FullWidth="true" TextArea="true"></MatTextField>
                        <MatButton Type="submit" Raised="true">@L["Add"]</MatButton>
                    </div>
                </fieldset>
            </EditForm>}
    </MatDialogContent>
    <MatDialogActions>
        <MatButton OnClick="@CancelPluralChanges">@L["Cancel"]</MatButton>
        <MatButton OnClick="@SaveChanges" Raised="true">@L["Save"]</MatButton>
    </MatDialogActions>
</MatDialog>
}

@code {

}
